<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础参数" name="1">
        <baseFormStyle />
      </el-collapse-item>
      <el-collapse-item title="折线样式" name="2">
        <lineSimpleStyle v-model="activeElement" />
      </el-collapse-item>
      <el-collapse-item title="X轴" name="3">
        <xAxis :xAxisConfig='xAxisConfig' :division="true" />
      </el-collapse-item>
      <el-collapse-item title="Y轴" name="4">
        <yAxis :yAxisData="yAxisData"/>
      </el-collapse-item>
      <el-collapse-item title="图例设置" name="5">
        <legendStyle :legendConfig="legendConfig"/>
      </el-collapse-item>
      <el-collapse-item title="系列设置" name="6" style="position: relative;">
        <seriesSetting :seriesSettingConfig='seriesSettingConfig' v-if="seriesSettingConfig" :formList="formList" />
      </el-collapse-item>
      <el-collapse-item title="动画设置" name="7">
        <animationConfig :animationConfig='chartConfig'/>
      </el-collapse-item>
    </el-collapse>
  </div>

</template>

<script>
	import {mapState, mapGetters} from 'vuex'
	import baseFormStyle from '../components/baseFormStyle'
	import lineSimpleStyle from '../components/lineSimpleStyle'
	import xAxis from '../components/xAxis'
	import yAxis from '../components/yAxis'
	import seriesSetting from '../components/seriesSetting'
  import legendStyle from "../components/legendStyle";
  import animationConfig from "../components/animationConfig";




	export default {
		name: "attr-qk-lineSimpleContrastForm",
		computed: {
			...mapState({
				projectData: state => state.editor.projectData,
				activePageUUID: state => state.editor.activePageUUID,
				activeElementUUID: state => state.editor.activeElementUUID,
				activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
			}),
			...mapGetters([
				'currentPageIndex',
				'activeElementIndex',
				'activeElement',
				'activePage'
			]),
      chartConfig() {
        return this.activeElement.propsValue.barOptions;
      },
      xAxisConfig() {
        return this.activeElement.propsValue.barOptions;
      },
      yAxisData(){
        return this.activeElement.propsValue.barOptions.yAxis;
      },
      seriesSettingConfig(){
        return this.activeElement.propsValue.barOptions.series;
      },
      legendConfig(){
        return this.activeElement.propsValue.barOptions.legend;
      }
		},
		components: {
			baseFormStyle,
			lineSimpleStyle,
      xAxis,
      yAxis,
      seriesSetting,
      legendStyle,
      animationConfig
		},
		data() {
			return {
				activeNames: ['1'],
        formList:[
          {title: '折线颜色',type:'color',route:'lineStyle'},
          {title: '标记点颜色',type:'color',route:'itemStyle'},
          {title: '系列名',type:'title',route:''},
        ]
			}
		},
		watch: {
			activeNames() {
				this.$store.commit('updateActiveAttrEditCollapse', this.activeNames)
			}
		},
		mounted() {
      this.activeNames = this.activeAttrEditCollapse;

		},
		created() {
		},
	}
</script>
<style lang="scss" scoped>
  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }

  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: $primary;
      }
    }
  }

  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 250px;
      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>
<style lang="scss">
  .attr-item-edit-wrapper {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 32px;
      width: 90px;
    }
    .el-input-number--mini {
      width: 90px;
    }
    .el-slider__runway.show-input {
      margin-right: 108px;
    }
  }
</style>